<template>
    <div class="top-container">
        <el-row :gutter="20">
            <el-col :sm="16" :lg="16" :xl="18" class="config-left-container">
                <el-table :data="configData" height="600px" v-loading="isConfigDataLoading">
                    <el-table-column property="prefix" label="文件前缀标识" width="200"></el-table-column>
                    <el-table-column property="fields" label="文件字段" width="200"></el-table-column>
                    <el-table-column property="domainClass" label="数据对象" width="200"></el-table-column>
                    <el-table-column property="importClass" label="自定义处理类" width="200"></el-table-column>
                    <el-table-column property="sqlStatementName" label="sqlStatementName" width="200"></el-table-column>
                    <el-table-column property="daoName" label="文件使用DAO" width="200"></el-table-column>
                    <el-table-column width="100" label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="text" @click="handleEditConfig(scope.row)">编辑</el-button>
                            <el-button type="text" @click="handleRemoveConfig(scope.row)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :sm="8" :lg="8" :xl="6">
                <el-form label-position="right" ref="configForm" :model="configForm" :rules="configFormRules" :disabled="isDisableForm">
                    <el-form-item label="文件前缀标识" prop="prefix" required label-width="150px" >
                        <el-input v-model="configForm.prefix" autocomplete="off" :disabled="isEdit"></el-input>
                    </el-form-item>
                    <el-form-item label="文件使用DAO" prop="daoName" label-width="150px" >
                        <el-input v-model="configForm.daoName" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="文件字段" prop="fields" required label-width="150px" >
                        <el-input v-model="configForm.fields" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="数据对象" prop="domainClass" label-width="150px" >
                        <el-input v-model="configForm.domainClass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="自定义处理类" prop="importClass" label-width="150px" >
                        <el-input v-model="configForm.importClass" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="sqlStatementName" prop="sqlStatementName" label-width="150px" required>
                        <el-input v-model="configForm.sqlStatementName" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <el-row style="text-align: right">
                    <el-button type="primary" v-if="!isEdit" @click="handleAddConfig" :disabled="isSaveLoading" :loading="isSaveLoading">新增</el-button>
                    <el-button type="primary" v-else @click="handleUpdateConfig" :disabled="isSaveLoading" :loading="isSaveLoading">更新</el-button>
                    <el-button @click="resetForm">重置</el-button>
                    <el-button @click.prevent="queryConfigData">刷新配置</el-button>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "fileConfig",
        props:['access_token'],
        data() {
            return {
                configData:[],
                isConfigDataLoading:false,
                configForm:{
                    prefix:'',
                    daoName:'',
                    fields:'',
                    domainClass:'',
                    importClass:'',
                    sqlStatementName:''
                },
                configFormRules:{
                    prefix: [
                        { required: true, message: '文件前缀标识不可缺少', trigger: 'change' },
                    ],
                    fields: [
                        { required: true, message: '文件字段不可缺少', trigger: 'change' },
                    ],
                    sqlStatementName: [
                        { required: true, message: 'sqlStatementName不可缺少', trigger: 'change' },
                    ]
                },
                isDisableForm:false,
                isEdit:false,
                isSaveLoading:false
            }
        },
        mounted(){
          this.queryConfigData();
        },
        methods:{
            resetForm(){
                this.isEdit = false;
                this.isDisableForm = this.isSaveLoading = false;
                this.$refs['configForm'].resetFields();
            },
            handleAddConfig(){
                this.$refs['configForm'].validate((valid) => {
                    if (valid) {
                        let formData = this.configForm;
                        this.isDisableForm=this.isSaveLoading=true
                        this.Base.submit(this,this.access_token,{
                            url:'/fileImport/FileImportConfigController!saveConfig.do',
                            formData
                        },(data)=>{
                            this.$message({
                                message: '保存成功',
                                type: 'success'
                            });
                            this.isDisableForm=this.isSaveLoading=false
                            this.queryConfigData();
                        },(error)=>{
                            this.$message({
                                message: error,
                                type: 'error'
                            });
                            this.isDisableForm=this.isSaveLoading=false
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleEditConfig(row){
                this.isEdit = true;
                this.configForm = Object.assign({},row);
            },
            handleUpdateConfig(){
                this.$refs['configForm'].validate((valid) => {
                    if (valid) {
                        let formData = this.configForm;
                        this.isDisableForm=this.isSaveLoading=true
                        this.Base.submit(this,this.access_token,{
                            url:'/fileImport/FileImportConfigController!updateConfig.do',
                            formData
                        },(data)=>{
                            this.$message({
                                message: '更新成功',
                                type: 'success'
                            });
                            this.isDisableForm=this.isSaveLoading=false
                            this.queryConfigData();
                        },(error)=>{
                            this.$message({
                                message: error,
                                type: 'error'
                            });
                            this.isDisableForm=this.isSaveLoading=false
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleRemoveConfig(row){
                let formData = {
                    prefix:row.prefix
                }
                if(row.prefix == this.configForm.prefix){
                    this.resetForm()
                }
                this.Base.submit(this,this.access_token,{
                    url:'/fileImport/FileImportConfigController!drop.do',
                    formData
                },(data)=>{
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                    this.queryConfigData();
                },(error)=>{
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },
            queryConfigData(){
                this.isConfigDataLoading = true
                this.Base.submit(this,this.access_token,{
                    url:'/fileImport/FileImportConfigController!getList.do'
                },(data)=>{
                    this.isConfigDataLoading = false
                    this.configData = (data.lists && data.lists.grid1 && data.lists.grid1.list) || []
                },(error)=>{
                    this.isConfigDataLoading = false
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                    this.configData = []
                })
            }
        }
    }
</script>
<style>
.config-left-container{
    border-right: 1px solid #F3F3F3;
}
</style>